<%@page import="org.proddevplm.dao.data.swot.SwotAnalysis"%>
<%@page import="org.proddevplm.dao.data.activities.Activity"%>
<%@page import="org.proddevplm.dao.data.competitors.Competitors"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>
<script>

	$ (function(){
		$( "button" ).button();
		$("#swotContent").hide();
	});
	
	$(document).ready(function() {
		
		$('.highlight').mouseover(function () {
		    $(this).css("color","black");
		 });

		$('.highlight').mouseout(function () {
		    $(this).css("color","#555555");	    
		 });
	});
	
	function loadSwotPageWithReq(request, page) {
        $.post(request, function(data) {
            $("#showSwot").load(page);
        });
    }
	
</script>

<script type="text/javascript">

	function sButton(){
		var text = document.getElementById('swotInput').value;
		if(text!=null && text!=""){
			document.swotForm.strengths.options[document.swotForm.strengths.options.length] = new Option(text);
			document.getElementById('swotInput').value = null;
		}
	}
	
	function wButton(){
		var text = document.getElementById('swotInput').value;
		if(text!=null && text!=""){
			document.swotForm.weaknesses.options[document.swotForm.weaknesses.options.length] = new Option(text);
			document.getElementById('swotInput').value = null;
		}
	}
	
	function oButton(){
		var text = document.getElementById('swotInput').value;
		if(text!=null && text!=""){
			document.swotForm.opportunities.options[document.swotForm.opportunities.options.length] = new Option(text);
			document.getElementById('swotInput').value = null;
		}
	}
	
	function tButton(){
		var text = document.getElementById('swotInput').value;
		if(text!=null && text!=""){
			document.swotForm.threats.options[document.swotForm.threats.options.length] = new Option(text);
			document.getElementById('swotInput').value = null;
		}
	}
	
	function removeLine(){
		for (var i=0; i<document.swotForm.strengths.length; i++){
			if (document.swotForm.strengths.options[i].selected){
				document.swotForm.strengths.options[i]=null;
			}
		}
		for (var i=0; i<document.swotForm.weaknesses.length; i++){
			if (document.swotForm.weaknesses.options[i].selected){
				document.swotForm.weaknesses.options[i]=null;
			}
		}
		for (var i=0; i<document.swotForm.opportunities.length; i++){
			if (document.swotForm.opportunities.options[i].selected){
				document.swotForm.opportunities.options[i]=null;
			}
		}
		for (var i=0; i<document.swotForm.threats.length; i++){
			if (document.swotForm.threats.options[i].selected){
				document.swotForm.threats.options[i]=null;
			}
		}
	}
	
	function selectedComp(name){
		var arguments = "competitor="+name;
		ajaxCall("dataAccessManager", "2", arguments, populateProducts);
	}
	
	function populateProducts(data){
		var productsResult = data;
		var pArray = productsResult.split("~");
		var optionSet="";
		optionSet+="<option SELECTED>-Please select an option-</option>";
		for(var i=0; i<pArray.length-1; i++){
			optionSet+="<option>"+pArray[i]+"</option>";
		}
		$("#prodSelect").html(optionSet);
	}
	
	function selectedProd(name){
		var arguments = "product="+name;
		ajaxCall("dataAccessManager", "3", arguments, populateTechChar);
	}
	
	function populateTechChar(data){
		var techCharResult = data;
		var techCharArray = techCharResult.split("~");
		optionSet="";
		for(var i=0; i<techCharArray.length; i++){
			optionSet+="<option>"+techCharArray[i]+"</option>";
		}
		$("#tcSelect").html(optionSet);
	}
	
	function finishAnalysis(){
		var sIndex = 0;
		var wIndex = 0;
		var oIndex = 0;
		var tIndex = 0;
		var strengthsList = '';
		var weaksList = '';
		var oppsList = '';
		var threatsList = '';
		
		$("#strengths option").each(function(){
			if(sIndex++>0){
				strengthsList+='~';
			}
			strengthsList+=$(this)[0].value;
		});
		
		$("#weaknesses option").each(function(){
			if(wIndex++>0){
				weaksList+='~';
			}
			weaksList+=$(this)[0].value;
		});
		
		$("#opportunities option").each(function(){
			if(oIndex++>0){
				oppsList+='~';
			}
			oppsList+=$(this)[0].value;
		});
		
		$("#threats option").each(function(){
			if(tIndex++>0){
				threatsList+='~';
			}
			threatsList+=$(this)[0].value;
		});
		
		
		var arguments = buildParameter("analysisName") + "&"
					+ buildParameter("compSelect") + "&"
					+ buildParameter("prodSelect") + "&strengthsList="
					+ strengthsList + "&weaksList=" + weaksList + "&oppsList="
					+ oppsList + "&threatsList=" + threatsList+"&"+buildParameter("activitySelect");

		ajaxCall("toolsManager", "2", arguments, clearPage);
	}
	
	function clearPage(data){
		document.getElementById('analysisName').value = null;
		document.getElementById('compSelect').selectedIndex = 0;
		document.getElementById('prodSelect').selectedIndex = 0;
		$('#tcSelect >option').remove();
		$('#strengths >option').remove();
		$('#weaknesses >option').remove();
		$('#opportunities >option').remove();
		$('#threats >option').remove();
		
	}
	
	function submitForm(){
		document.forms["swotForm"].submit();
	}
	
	function showSwotAnalysis(){
		var name = document.getElementById('swotApproveSelect').value;
		var request = "/proddev/controller?manager=dataAccessManager&method=23&swotRequestName="+name;
		
		loadSwotPageWithReq(request, "content/project/devTools/workspace/competitors/showSwot.jsp");
	}
	
</script>

<%
List<Competitors> competitorsByProduct = (List)session.getAttribute("competitorsByProduct"); 
List<Activity> activitiesForUser = (List)session.getAttribute("activitiesForUser");
List<SwotAnalysis> swotByActName = (List)session.getAttribute("swotByActName");

%>

<div class="pageTitle" >
	<div style="text-align:left;">
		<a href="/proddev/controller?manager=dataAccessManager&method=21">
			<img src="/proddev/images/arrowleft.png" align="middle" height="20" width="30" style="border:0px"></a>
	</div>
	<p style="font-size:small; font-weight:bold; margin-top:-20px">SWOT Analysis</p>

</div>

<div class="containerSmall" id="swotPageDiv" align="center" style="margin-top:10px">
	<%if(swotByActName==null){ %>
		<div style="margin-top:10px;">
			<div style="width:20%; float:left; text-align:left; font-weight:bold">
				Please choose the activity <br/>you want to complete
			</div>
			<select class="regInput" id="activitySelect" name="activitySelect" onchange="$('#swotContent').show()" size="1" style="width:35%; float:left;">
				<option SELECTED>-select activity-</option>
				<%if(activitiesForUser!=null){
					for(int i=0; i<activitiesForUser.size(); i++) {
						Activity activity = (Activity)activitiesForUser.get(i);%>
						<option value="<%=activity.getName()%>"><%=activity.getName() %></option>
					<%}
				}
				%>		
			</select>
			<div style="clear:both"></div>
		</div>
		<div id="swotContent" style="width:auto">
			<div style="width:100%; margin-top:10px; float:left;">
				<div class="highlight" style="width: 20%; text-align:left; float: left;">
					<b>Analysis name: </b>
				</div>
				<input class="regInput" type="text" id="analysisName" name="analysisName" style="width:35%; float:left; ">
			</div>
			<div style="clear:both"></div>
			
			<div style="width:100%; margin-top:10px; float:left">
				<div class="highlight" style="width: 20%; text-align:left; float: left;">
					<b>Competitor:</b>
				</div>
				<select class="regInput" id="compSelect" name="compSelect" onChange="selectedComp(this.options[selectedIndex].text)" size="1" style="width:35%; float:left; ">
					<option SELECTED>-Please select an option-</option>
					<%if (competitorsByProduct!=null){
						for (Competitors c:competitorsByProduct) {%>
							<option value="<%=c.getName() %>"><%=c.getName() %></option>
						<%} 
					}%>	
				</select>
				<div style="clear:both"></div>
			</div>
			
			
			<div style="width:100%; margin-top:10px; float:left">
				<div class="highlight" style="width: 20%; text-align:left; float: left;">
					<b>Product:</b>
				</div>
				<select class="regInput" id="prodSelect" name="prodSelect" onChange="selectedProd(this.options[selectedIndex].text)" size="1" style="width:35%; float:left;">
				
				</select>
				<div style="clear:both"></div>
			</div>
			
			
			<div style="width:100%; margin-top:10px; float:left">
				<div class="highlight" style="width: 20%; text-align:left; float: left; ">
					<b>Technical characteristics:</b>
				</div>
				<select class="regInput" id="tcSelect" name="tcSelect" size="5" style="width:35%; float:left;">
				
				</select>
				<div style="clear:both"></div>
			</div>
			
			<div style="width:100%; margin-top:10px; float:left">
				<div class="highlight" style="width:20%; margin-top:10px; float:left; text-align:left;">
					<b>Fill in information to complete the SWOT Analysis</b>
				</div>
			
				<div style="width:35%; float:left">
					<input class="regInput" type="text" id="swotInput" name="swotInput" style="width:100%">
						<div style="margin:5px; text-align:center">
							Add your text in the field above and click on the category </br> 
							you want to add information to
						</div>
				</div>
				<div style="float:left">
					<table >
						<tr>
							<td><button id="sButton" name="sButton" onclick="sButton()" style="width:30px; font-weight: bold; font-size:x-small;">S</button></td>
							<td><button id="wButton" name="wButton" onclick="wButton()" style="width:30px; font-weight: bold; font-size:x-small;">W</button></td>
						</tr>
						<tr>
							<td><button id="oButton" name="oButton" onclick="oButton()" style="width:30px; font-weight: bold; font-size:x-small;">O</button></td>
							<td><button id="tButton" name="tButton" onclick="tButton()" style="width:30px; font-weight: bold; font-size:x-small;">T</button></td>
						</tr>
					</table>
				</div>
				<div style="clear:both"></div>
			</div>
			<div style="clear:both"></div>
					
			<div id="swotTable" style="width:100%; margin-top:10px;">
				<form name="swotForm" method="post" action="/proddev/controller">
					<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
					<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.SWOT_FORWARDING%>"/>
									
					<table style="width:100%; border: 1px solid #B8B8B8; -moz-border-radius:5px; font-size:small" cellpadding="0" cellspacing="0" border="1">
						<tr>
							<td style="width:50%; font-weight: bold; font-size:medium; text-align:center; background-color:#F0F0F6">Strengths</td>
							<td style="width:50%; font-weight: bold; font-size:medium; text-align:center; background-color:#F0F0F6">Weaknesses</td>
						</tr>
						<tr>
							<td>
								<select id="strengths" name="strengths" size="5" style="border:none; width:100%"></select>	
							</td>
							<td>
								<select id="weaknesses" name="weaknesses" size="5" style="border:none; width:100%"></select>
							</td>
						</tr>
						<tr>
							<td style="width:50%; font-weight: bold; font-size:medium; text-align:center; background-color:#F0F0F6">Opportunities</td>
							<td style="width:50%; font-weight: bold; font-size:medium; text-align:center; background-color:#F0F0F6">Threats</td>
						</tr>
						<tr>
							<td>
								<select id="opportunities" name="opportunities" size="5" style="border:none; width:100%"></select>	
							</td>
							<td>
								<select id="threats" name="threats" size="5" style="border:none; width:100%"></select>
							</td>
						</tr>
					
					</table>
				</form>
			</div>
				
			<div id="menuButtons" style="margin-top: 10px">
				<button id="removeLine" name="removeLine" onclick="removeLine()" style="width:200px; font-weight: bold; float:left;">Remove element</button>
				<button id="finishAnalysis" name="finishAnalysis" onclick="finishAnalysis()" style="width:200px; font-weight:bold; float:center;">Submit analysis</button>
				<button id="submitForm" name="submitForm" onclick="submitForm()" style="width:200px; font-weight:bold; float:right">Done</button>
				<div style="clear:both"></div>
			</div>
						
		</div>	
		<div style="clear:both"></div>
</div>
	<%}else{ %>
		
		<div style="margin: 10 10 5">
			<div style="float:left; text-align:left; font-weight:bold">
				Please select the analysis that you want to review
			</div>
			<select id="swotApproveSelect" name="swotApproveSelect" onchange="showSwotAnalysis()" size="1" style="width:25%; float:left; margin-left:10px">
				<option SELECTED>-select analysis-</option>
				<%if(swotByActName!=null){
					for(int i=0; i<swotByActName.size(); i++){
						SwotAnalysis s = (SwotAnalysis)swotByActName.get(i);%>
						<option value="<%=s.getName() %>"><%=s.getName() %></option>
					<%}
				} %>
			</select>
			<div style="clear:both"></div>
		</div>
				
		<div id="showSwot" style="margin: 10px">
			
		</div>	
		<div style="clear:both"></div>
	<%} %>
</div>